<template>
  <view>
    <u-popup
      :show="show"
      @close="show = false"
      :overlay="overlay"
      close-on-click-overlay
      :mode="mode"
      :round="round"
      :duration="duration"
      :bg-color="bgColor"
      :safe-area-inset-bottom="safeAreaInsetBottom"
    >
      <view class="popup-bg">
        <view class="popup-body f f-ac f-jc">
          <view class="popup-body-box">
            <view v-for="(i, k) in text.split('\n')">{{ i }}</view>
          </view>
        </view>
        <view
          class="popup-btn-box f f-ac f-jb"
          :style="{
            borderBottomLeftRadius: round + 'px',
            borderBottomRightRadius: round + 'px',
          }"
        >
          <view v-if="cencel" class="popup-btn-left f-1" @click="show = false">
            {{ cencelText }}</view
          >
          <view class="popup-btn-right bg-green f-1" @click="handleConfirm">
            {{ confirmText }}</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    // 控制显示
    value: {
      type: Boolean,
      default: false,
    },
    // 弹窗内容
    text: {
      type: String,
      default: "暂无提示",
    },
    // 是否显示遮罩
    overlay: {
      type: Boolean,
      default: true,
    },
    // 弹出方向
    mode: {
      type: String,
      default: "center",
    },
    // 圆角
    round: {
      type: [Number, String],
      default: 15,
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: "#fff",
    },
    // 是否留出底部安全距离
    safeAreaInsetBottom: {
      type: Boolean,
      default: false,
    },
    // 动画过渡时长
    duration: {
      type: [Number, String],
      default: 300,
    },
    // 显示取消
    cencel: {
      type: Boolean,
      default: true,
    },
    // 左侧按钮文字
    cencelText: {
      type: String,
      default: "取消",
    },
    // 右侧按钮文字
    confirmText: {
      type: String,
      default: "确定",
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("close", false);
      },
    },
  },
  methods: {
    // 确认事件
    handleConfirm() {
      this.$emit("confirm");
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-bg {
  width: 670rpx;
  height: 306rpx;
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
  .popup-body {
    height: 166rpx;
    width: 100%;
    box-sizing: border-box;
    color: #21212a;
    font-family: FZZongYi-M05S;
    font-size: 40rpx;
    letter-spacing: 8rpx;
    overflow: hidden;
    &-box {
      position: relative;
      text-align: center;
      word-break: break-all;
      &::before {
        content: "";
        display: block;
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        position: absolute;
        left: 30rpx;
        bottom: -10rpx;
        background-color: #24de734d;
      }
      &::after {
        content: "";
        display: block;
        width: 58rpx;
        height: 58rpx;
        border-radius: 50%;
        position: absolute;
        right: 17rpx;
        top: -10rpx;
        background-color: #24de734d;
      }
    }
  }
  .popup-btn-box {
    position: absolute;
    height: 100rpx;
    width: 100%;
    bottom: 0;
    left: 0;
    line-height: 100rpx;
    letter-spacing: 8rpx;
    font-size: 28rpx;
    text-align: center;
    border-top: 1rpx solid #24de73;
    overflow: hidden;
    .popup-btn-left {
      height: 100%;
      color: #909090;
      &:active {
        background-color: #f1f1f1;
      }
    }
    .popup-btn-right {
      height: 100%;
      color: #fff;
      &:active {
        background-color: #25ca6a;
      }
    }
  }
}
</style>
